<script setup lang="ts">
import { computed } from 'vue'
import { getAssetsFiles } from '@/utils';

defineOptions({
    name: 'BiPopup'
})

const emit = defineEmits(['click', 'close'])

interface Props {
    type?: string,
    buttonText?: string,
    showRewardsWord?: boolean,
    tips?: string,
    displayTips?: boolean,
    rewardsType?: string,
    rewardsNum?: number
}
const props = withDefaults(defineProps<Props>(), {
    type: 'normal',// 弹窗类型 default: normal  可选: task
    showRewardsWord: true,// 弹窗顶部文字，仅 type: normal 时可用
    tips: '',// 弹窗底部文字，仅 type: normal 时可用
    displayTips: true,
    buttonText: 'Get More',// 弹窗按钮文字
    rewardsType: 'trophy',// 奖励类型，用来展示相应的奖励图片  可选：flame; doller
    rewardsNum: 1 // 奖励数量
})

const rewardsImgUrl = computed(() => {
    return getAssetsFiles(`${props.rewardsType}.png`)
})

const show = defineModel<boolean>('show', { required: true })

const className = computed(() => ({
    'popup-task-main': props.type === 'task',
    tour: props.type === 'tour'
}))
</script>
<template>
    <div class="popup">
        <van-popup v-model:show="show" @close="emit('close')" round :overlay-class="props.type === 'tour' ? '' : 'mask'">
            <div class="main" :class="className">
                <template v-if="props.type === 'normal'">
                    <div class="normal">
                        <div class="normal-wrapper">
                            <span class="normal-wrapper-title" v-if="props.showRewardsWord">CONGRATULATIONS!</span>
                            <slot>
                                <div class="normal-wrapper-content">
                                    <div class="popup-slot">
                                        <img :src="rewardsImgUrl" :alt="props.rewardsType" width="50">
                                        <span class="yellow-text">+{{ props.rewardsNum }}</span>
                                    </div>
                                </div>
                                <div class="normal-wrapper-tips" v-if="props.tips.length && props.displayTips">
                                    <span class="normal-wrapper-tips_span">{{ props.tips }}</span>
                                </div>
                            </slot>
                        </div>
                        <div class="normal-wrapper-btn" @click="emit('click')">{{ buttonText }}</div>
                    </div>
                </template>
                <template v-if="props.type === 'task'">
                    <div class="popup-task-main-part">
                        <div class="popup-task-main-part-wrapper">
                            <div class="popup-task-main-part-wrapper-content">
                                <img class="popup-task-main-part-wrapper-content_icon"
                                    src="@/assets/imgs/popup/popup-book-icon.png" alt="book_icon">
                                <slot></slot>
                            </div>
                        </div>
                        <div class="popup-task-main-part-btn" @click="emit('click')">{{ buttonText }}</div>
                    </div>
                </template>
                <template v-if="props.type === 'tour'">
                    <div class="tour-main">
                        <span class="tour-main-title">
                            <slot name="title">title</slot>
                        </span>
                        <p class="tour-main-content">
                            <slot name="content">内容</slot>
                        </p>
                        <div class="tour-main-btn" @click="emit('click')">
                            {{ props.buttonText }}
                        </div>
                    </div>
                </template>
            </div>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
@import url(./index.scss);

.van-overlay.mask::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    background: url(@/assets/imgs/popup/aureole.png) no-repeat -21vmin center;
    background-size: 148vmin;
    z-index: 9;
    pointer-events: none;
}

.van-popup {
    background: transparent;
}
</style>